<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开始页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style>
			body {
				margin: 0;
				width: 100vw;
				height: 100vh;
				background-image: url('../images/start_bg.png');
				background-repeat: no-repeat;
				background-size: contain;
				text-align: center;
			}

			#bang,
			#menu {
				position: fixed;
				left: 0;
				right: 0;
			}

			#menu {
				top: 60vh;
			}

			#bang {
				top: 42vh;
				color: #333;
				display: none;
			}

			#bang>ol {
				display: inline-block;
				background-color: white;
				box-shadow: 3px 3px 10px #6669;
				text-align: left;
				line-height: 2rem;
			}

			#bang>ol>li {
				padding-right: 20px;
			}

			a {
				border: 1px solid black;
				background-color: #ddd;
				display: inline-block;
				padding: 10px 0;
				width: 200px;
			}

			.no-record {
				padding: 10px 20px;
				background-color: white;
				box-shadow: 3px 3px 10px #6669;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<a>开始游戏</a>
			<br>
			<br>
			<a>排行榜</a>
		</div>

		<div id="bang"></div>
	</body>

	<script>
		$("#bang").click(function(e) {
			$(this).hide()
			//显示菜单
			$('#menu').show()
		})

		$("#menu>a:nth-of-type(1)").click(_ => {
			window.open('./game.html')
		})
		$("#menu>a:nth-of-type(2)").click(_ => {
			//显示榜单
			$("#bang").show();
			//隐藏菜单栏
			$('#menu').hide()
			//获取历史数据
			if (localStorage.bang) {
				//读取数据
				let data = JSON.parse(localStorage.bang);
				let arr = ['<ol>'];
				data.forEach(({ time, score }) => {
					arr.push(`<li>${time} 分数：${score}</li>`)
				})
				arr.push('</ol>');
				bang.innerHTML = arr.join('');
			} else {
				bang.innerHTML = `<span class="no-record">没有排行记录</span>`
			}
		})
	</script>

</html>
